/*
客户充值10
*/
<template>
  <div class="app-page">
    <!-- 操作菜单区 -->
    <my-header>
      <el-button @click="getRecharge" v-repeatClick>刷新</el-button>
    </my-header>

    <!-- 列表区 -->
    <el-card style="flex: 1;">
      <div class="app-page">
        <div class="content-flex">
          <div>
            <el-form ref="search" :model="search" inline size="small">
              <div>
                <el-form-item label="" prop="serialType">
                  <el-select clearable v-model="search.serialType" placeholder="核销类型" style="width: 100px">
                    <el-option v-for="option in baseFormOptions.serialType" :key="option" :label="option"
                      :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="info">
                  <el-input placeholder="搜索:客户号/运单号/收据号/预付款号/收款提现/网络支付流水号/备注" v-model="search.info" style="width: 450px"
                    clearable></el-input>
                </el-form-item>
                <el-form-item label="" prop="payType">
                  <el-select clearable v-model="search.payType" placeholder="缴费方式" style="width: 200px">
                    <el-option v-for="option in baseFormOptions.payType" :key="option" :label="option"
                      :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="rechargeType">
                  <el-select clearable v-model="search.rechargeType" placeholder="来源与用途" style="width: 200px">
                    <el-option v-for="option in baseFormOptions.rechargeType" :key="option" :label="option"
                      :value="option"></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="" prop="moneyType">
                  <el-select clearable v-model="search.moneyType" placeholder="货币类型" style="width: 100px">
                    <el-option v-for="option in baseFormOptions.moneyType" :key="option" :label="option"
                      :value="option"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="date">
                  <el-date-picker v-model="search.date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="" prop="">
                  <el-button type="primary" round @click="searchPage">搜索</el-button>
                  <el-button type="warning" round @click="$refs.search.resetFields()">重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
        <!-- 列表区 -->
        <div style="flex: 1">
          <el-table height="100%" :data="data" border stripe highlight-current-row ref="multipleTable"
            @row-dblclick="handleRowDbclick" @selection-change="handleSelectionChange">
            <el-table-column type="index" width="55" align="center">
            </el-table-column>
            <el-table-column type="selection" width="55" align="center">
            </el-table-column>
            <el-table-column label="操作时间" sortable width="200" prop="updateTime" align="center"></el-table-column>
            <el-table-column label="核销类型" min-width="150">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.serialType === '入账' ? 'green' : 'red' }">
                  {{ scope.row.serialType }}
                </span>
                <span style="margin:0 10px">
                  <span>{{ scope.row.serialType === '入账' ? '+' : '-' }}</span>
                  {{ scope.row.paymentAmount }}
                </span>
                <span>{{ scope.row.moneyType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次结余" prop="currentCustomerBalance"></el-table-column>
            <el-table-column label="缴费方式" prop="payType"></el-table-column>
            <el-table-column label="来源与用途" prop="rechargeType" width="150"></el-table-column>
            <el-table-column label="备注" min-width="400">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.storeName }}
                  <span style="margin-left:5px">流水号：{{ scope.row.serialCode }}</span>
                </div>
                <div style="margin: 5px 0">{{ scope.row.note }}</div>
                <div v-if="scope.row.receiptCode">收据号：{{ scope.row.receiptCode }}</div>
              </template>
            </el-table-column>
            <el-table-column label="操作人" prop="updateUser" align="center"></el-table-column>
          </el-table>
        </div>
        <!-- 分页区 -->
        <div style="margin-top: 10px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-sizes="[20, 50, 100, 200, 500, 1000]" :page-size="pageSize" background
            :layout="isMobile ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'" :small="isMobile"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 添加修改零售预购单信息 -->
    <el-dialog v-dialog-drag :title="title + '零钱'" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      width="500px" @close="restForm">
      <el-form size="small" :model="baseForm" label-position="left" label-width="120px" :rules="baseFormRules"
        ref="baseForm">
        <el-form-item prop="orderCode" label="流水号">
          {{ baseForm.serialCode }}
        </el-form-item>
        <el-form-item prop="customerNum" label="客户号">
          <el-input v-model="baseForm.customerNum"></el-input>
        </el-form-item>
        <el-form-item prop="storeId" label="所属门店">
          <el-select ref="select" filterable style="width: 100%" v-model="baseForm.storeName" placeholder="请选择所属门店">
            <el-option v-for="item in stores" :key="item.id" :value="item.name" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="serialType" label="核销类型">
          <el-radio-group v-model="baseForm.serialType">
            <el-radio :label="item" v-for="item in baseFormOptions.serialType" :key="item">{{ item }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="moneyType" label="零钱货币类型">
          <el-radio-group v-model="baseForm.moneyType">
            <el-radio :label="item" v-for="item in baseFormOptions.moneyType" :key="item">{{ item }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="paymentAmount" label="缴费金额">
          <el-input v-model="baseForm.paymentAmount"></el-input>
        </el-form-item>
        <el-form-item label="客户缴费方式" prop="payType">
          <el-select clearable v-model="baseForm.payType" placeholder="缴费方式" style="width: 100%">
            <el-option v-for="option in baseFormOptions.payType" :key="option" :label="option"
              :value="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="note" label="" label-width="0px">
          <el-input v-model="baseForm.note" placeholder="备注"></el-input>
        </el-form-item>
        <el-row :gutter="20" style="margin-top:30px">
          <el-col :span="24" style="text-align: right">
            <el-form-item>
              <el-button style="margin-left: 10px" @click="restForm">重置</el-button>
              <el-button type="primary" @click="submit" v-if="title != '查看'">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

let search = {
  //搜索
  info: '',
  //核销类型
  serialType: '',
  //支付方式
  payType: "",
  //来源于用途
  rechargeType: "",
  //货币类型
  moneyType: '',
  //时间范围
  date: []
};


//零售预购单基本信息表单
let baseForm = {
  id: 0,
  //流水号编号
  serialCode: '',
  //核销类型
  serialType: '入账',
  //支付方式
  payType: "",
  //来源于用途
  rechargeType: "",
  //货币类型
  moneyType: '加元',
  //缴费金额
  paymentAmount: 0,
  //客户号
  customerNum: '',
  //门店名
  storeName: '',
  //备注
  note: '',
};

import myHeader from "@/components/pageHEader/pageHeader";
import { mapGetters } from "vuex";
import { getDict } from '@/api/common'
import {
  getRecharge,
  modRecharge,
  delRecharge,
  addRecharge,
  getRechargeCode,
  getRechargeUseType
} from '@/api/finances/charge'


export default {
  name: "charge",
  components: {
    myHeader,
  },
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      total: 0,
      data: [],
      //表格选中
      multipleSelection: [],
      //搜索
      search: this.cloneObj(search),
      //对话框
      dialogFormVisible: false,
      title: "添加",
      baseForm: this.cloneObj(baseForm),
      baseFormRules: {
        customerNum: [this.$RegExp.required()],
        moneyType: [this.$RegExp.required()],
        paymentAmount: [this.$RegExp.required(), this.$RegExp.lgZero()],
        payType: [this.$RegExp.required('请选择缴费方式')],
      },
      baseFormOptions: {
        serialType: ['入账', '出账'],
        payType: [],
        rechargeType: [],
        moneyType: [],
      },
    };
  },
  computed: {
    ...mapGetters(["stores", "roles", "userInfo"]),
    isMobile() {
      return window.innerWidth <= 768;
    }
  },
  created() {
    this.getDic('Currency').then(resp => {
      this.baseFormOptions.moneyType = resp.data.records[0].childrenInfo.map(item => item.content)
    })
    this.getDic('payType').then(resp => {
      this.baseFormOptions.payType = resp.data.records[0].childrenInfo.map(item => item.content).filter(item => item.indexOf('退款') === -1 && item.indexOf('积分') === -1 && item.indexOf('零钱') === -1)
    })
    getRechargeUseType().then(resp => {
      this.baseFormOptions.rechargeType = resp.data
    })
  },
  mounted() {
    this.getRecharge();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRecharge()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRecharge()
    },
    //重置表单信息
    restForm() {
      this.$nextTick(() => {
        if (this.$refs.baseForm) this.$refs.baseForm.resetFields();
      });
    },
    handleBeforeUpdate() {
      if (!this.multipleSelection.length) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length > 1) {
        this.tip("只能勾选表格中的一条数据");
        return;
      }
      this.handleAddUpdate(this.multipleSelection[0])
    },
    handleAddUpdate(row) {
      //修改处理
      if (row) {
        this.title = "修改";
        //将数据复制给form
        this.handleModform(row, this.baseForm);
        this.dialogFormVisible = true;
      } else {
        getRechargeCode().then(resp => { //获取新增时的零售预购单编号
          this.baseForm = this.cloneObj(baseForm);
          this.baseForm.serialCode = resp.data
          this.title = "添加";
          this.dialogFormVisible = true;
        })
      }
    },
    getRecharge() {
      let query = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        info: this.search.info,
        serialType: this.search.serialType,
        moneyType: this.search.moneyType,
        payType: this.search.payType,
        rechargeType: this.search.rechargeType,
        startTime: this.search.date[0] ? this.search.date[0] + ' 00:00:00' : '',
        endTime: this.search.date[1] ? this.search.date[1] + ' 23:59:59' : '',
      };
      getRecharge(query).then((resp) => {
        this.data = resp.data.records
        this.total = resp.data.total;
      });
    },
    //搜索
    searchPage() {
      this.currentPage = 1
      this.pageSize = 20
      this.getRecharge()
    },
    //表格双击修改
    handleRowDbclick(row) {
      this.handleAddUpdate(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    submit() {
      this.$refs["baseForm"].validate((valid) => {
        if (valid) {
          let submit = Object.assign(
            this.baseForm
          );
          let request;
          if (this.title === "添加") {
            request = addRecharge;
          } else {
            request = modRecharge;
          }
          request(submit).then((resp) => {
            this.$message.success(resp.message || "成功");
            this.dialogFormVisible = false;
            this.getRecharge();
          });
        }
      });
    },
    //查看零售预购单信息
    view() {
      this.handleBeforeUpdate();
      this.title = '查看'
    },
    //删除零售预购单信息
    delRecharge() {
      if (this.multipleSelection.length === 0) {
        this.tip();
        return;
      }
      if (this.multipleSelection.length !== 1) {
        this.tip("当前删除耗时较长，只能勾选表格中的一条数据删除！");
        return;
      }
      this.confirm().then(() => {
        delRecharge(this.multipleSelection[0].id).then(resp => {
          this.$message.success(resp.message || "成功");
          this.getRecharge();
        }
        );
      });
    },

  },
};
</script>

<style lang="scss" scoped>
@import "../../styles/_themeify";
@import "../../styles/mobile.scss";

.app-page {
  .search-form {
    @media screen and (max-width: 768px) {
      .el-form-item {
        width: 100%;
        margin-right: 0;
      }
    }
  }

  .el-table {
    @media screen and (max-width: 768px) {
      /deep/ .el-table__row {
        td {
          padding: 5px !important;
        }
      }
    }
  }
}

// 移动端对话框样式优化
.el-dialog {
  @media screen and (max-width: 768px) {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;

        .el-form-item__label {
          float: none;
          text-align: left;
          padding: 0 0 5px;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .el-input,
      .el-select,
      .el-cascader {
        width: 100%;
      }

      .el-date-picker {
        width: 100% !important;
      }
    }
  }
}
</style>
